import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity} from 'react-native';
import { Card, Button } from '@ant-design/react-native';
import { Pagination, WhiteSpace, WingBlank } from '@ant-design/react-native'

interface HomePageCardProps {
    image: string | number;
    title: string;
    desc?: string;
    onAddPress?: () => void;
    buttonText?: string; // 新增
}

export const HomePageCard: React.FC<HomePageCardProps> = ({ image, title, desc, onAddPress, buttonText = '操作' }) => {
    return (
        <View>
            <Card style={styles.card}>
                <View style={styles.imageWrapper}>
                    <Image
                        source={typeof image === 'string' ? { uri: image } : image}
                        style={styles.image}
                        resizeMode="cover"
                    />
                    {/* 覆盖内容层 */}
                    <View style={styles.overlay}>
                        <Text style={styles.title}>{title}</Text>
                        {desc && <Text style={{ color: '#333', fontSize: 14, marginBottom: 8 }}>{desc}</Text>}
                        <WhiteSpace size='lg'/>
                        {/* <WhiteSpace size='lg'/> */}
                        <TouchableOpacity
                            style={styles.button}
                            onPress={onAddPress}
                            activeOpacity={0.7}
                        >
                            <Text style={styles.buttonText}>{buttonText}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Card>
        </View>
    );
};

const styles = StyleSheet.create({
    card: {
        width: 330,
        height: 140,
        borderRadius: 12,
        overflow: 'hidden',
        backgroundColor: '#fff',
        shadowColor: '#000',           // iOS 阴影颜色
        shadowOffset: { width: 0, height: 4 }, // iOS 阴影偏移
        shadowOpacity: 0.15,           // iOS 阴影透明度
        shadowRadius: 8,               // iOS 阴影半径
        elevation: 6,   
    },
    imageWrapper: {
        width: 330,
        height: 140,
        // borderRadius: 12,
        overflow: 'hidden',
        position: 'relative',
    },
    image: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
    },
    overlay: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        paddingLeft: 16,
        // alignItems: 'center',
        marginLeft: 16,
        // 可加半透明背景提升可读性
        // backgroundColor: 'rgba(0,0,0,0.15)',
    },
    title: {
        color: '#000',
        fontSize: 24,
        fontWeight: 'bold',
        textShadowColor: 'rgba(255, 255, 255, 0.3)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        marginBottom: 8,
    },
    button: {
        backgroundColor: 'rgba(255, 255, 255, 0.85)',
        paddingHorizontal: 16,
        borderRadius: 8,
        width: 80,
        height: 30,
        justifyContent: 'center',   // 垂直居中
        alignItems: 'center',       // 水平居中
    },
    buttonText: {
        color: '#3366cc',
        fontSize: 14,
        fontWeight: 'bold',
    },
});